import React, { Component } from 'react';
import styles from './index.module.scss';
import { connect } from 'react-redux';
import { update } from '@/utils/immutableUtil';
import classNames from 'classnames';
import * as Dialog from '@radix-ui/react-dialog';
import { X } from 'lucide-react';
import { userllmByFirm, setllm } from '@/api/ai';

@connect(({}) => ({}))
class Comp extends Component {
  state = {
    apiKey: '',
    baseUrl: '',
  };

  componentDidMount() {
    if (this.props.model) {
      this.getData();
    }
  }

  getData = async () => {
    const { model } = this.props;

    var reqData = {
      firm: model.name,
    };
    var rs = await userllmByFirm(reqData);
    if (rs.data?.code == 200) {
      var data = rs.data.data;
      this.setState({
        apiKey: data.api_key,
        baseUrl: data.base_url,
      });
    }
  };

  handleInputChange = (e) => {
    this.setState({
      [e.target.name]: e.target.value,
    });
  };

  handleSubmit = async () => {
    const { model } = this.props;

    var reqData = {
      firm: model.name,
      api_key: this.state.apiKey,
      base_url: this.state.baseUrl,
    };
    var rs = await setllm(reqData);
    if (rs.data?.code == 200) {
      this.props.onClose();
    }
  };

  shouldComponentUpdate = (np, ns) => update.call(this, np, ns);

  render() {
    const { onClose } = this.props;
    const { apiKey, baseUrl } = this.state;

    return (
      <Dialog.Root open={true} onOpenChange={onClose}>
        <Dialog.Portal>
          <Dialog.Overlay className={styles.dialogOverlay} />
          <Dialog.Content className={styles.dialogContent}>
            <div className={styles.dialogHeader}>
              <Dialog.Title className={styles.dialogTitle}>
                Add Model Access Set
              </Dialog.Title>
              <Dialog.Close asChild>
                <button className={styles.closeButton}>
                  <X size={18} />
                </button>
              </Dialog.Close>
            </div>

            <div className={styles.content}>
              <div className={styles.formGroup}>
                <label className={styles.formLabel}>Endpoint</label>
                <input
                  type="text"
                  name="baseUrl"
                  className={styles.formInput}
                  value={baseUrl}
                  onChange={this.handleInputChange}
                  placeholder="https://api.example.com/v1"
                  autoComplete="off"
                />
              </div>
            </div>

            <div className={styles.formGroup}>
              <label className={styles.formLabel}>API Key</label>
              <input
                type="password"
                name="apiKey"
                className={styles.formInput}
                value={apiKey}
                onChange={this.handleInputChange}
                placeholder="Enter your API key"
                autoComplete="new-password"
                data-form-type="other"
              />
            </div>

            <div className={styles.dialogFooter}>
              <Dialog.Close asChild>
                <button className={styles.cancelButton}>Cancel</button>
              </Dialog.Close>
              <button className={styles.addButton} onClick={this.handleSubmit}>
                Save
              </button>
            </div>
          </Dialog.Content>
        </Dialog.Portal>
      </Dialog.Root>
    );
  }
}

export default Comp;
